<template>
  <van-nav-bar title="填写基本信息" left-arrow @click-left="$router.back()" />
  <div class="edit-info-container">
    <div class="section-title-bg">基本信息</div>
    <form class="edit-form">
      <div class="form-row required">
        <label>姓名</label>
        <input v-model="name" type="text" placeholder="真实姓名" />
      </div>
      <div class="form-row required">
        <label>性别</label>
        <van-radio-group v-model="gender" direction="horizontal">
          <van-radio name="男">男</van-radio>
          <van-radio name="女">女</van-radio>
        </van-radio-group>
      </div>
      <div class="form-row required">
        <label>身高</label>
        <input v-model="height" type="number" placeholder="请输入身高" />
        <span class="unit">厘米</span>
      </div>
      <div class="form-row required">
        <label>体重</label>
        <input v-model="weight" type="number" placeholder="请输入体重" />
        <span class="unit">公斤</span>
      </div>
      <div class="form-row">
        <label>BMI</label>
        <input :value="bmi" type="text" placeholder="输入身高、体重后自动计算" disabled />
      </div>
      <div class="form-row">
        <label>身份证号</label>
        <input v-model="idNumber" type="text" placeholder="此处填写身份证号" />
      </div>
      <div class="form-row required">
        <label>出生年月</label>
        <input v-model="birth" type="date" placeholder="出生年月" />
      </div>
      <div class="form-row">
        <label>受教育水平</label>
        <input v-model="education" type="text" placeholder="点击输入受教育水平" />
      </div>
      <div class="form-row">
        <label>需要陪护</label>
        <div class="switch-wrap">
          <van-switch v-model="needCare" size="20px" active-color="#a48cff" inactive-color="#e0e0e0" />
          <span class="switch-label">{{ needCare ? '是' : '否' }}</span>
        </div>
      </div>
    </form>
    <button class="save-btn" @click="onSave">保存修改</button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { RadioGroup, Radio, Switch, Toast, NavBar } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()

const name = ref('羊羊羊')
const gender = ref('男')
const height = ref('')
const weight = ref('')
const idNumber = ref('')
const birth = ref('1980-01-01')
const education = ref('')
const needCare = ref(false)

const bmi = computed(() => {
  const h = parseFloat(height.value)
  const w = parseFloat(weight.value)
  if (!h || !w) return ''
  return (w / ((h / 100) * (h / 100))).toFixed(1)
})

function onSave() {
  // 保存逻辑
  router.push('/basic-info')
}
</script>

<style scoped>
.edit-info-container {
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  font-size: 28px;
  position: relative;
  padding-bottom: 110px; /* 给底部按钮留空间 */
}
.section-title-bg {
  background: linear-gradient(90deg, #e3d6ff 0%, #fff 100%);
  color: #444;
  font-size: 32px;
  font-weight: 700;
  padding: 18px 0 12px 18px;
  margin-bottom: 8px;
}
.edit-form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 0 18px;
  font-size: 30px;
}
.form-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  padding: 18px 0 10px 0;
  font-size: 30px;
  position: relative;
  gap: 16px;
}
.form-row label {
  min-width: 120px;
  flex: none;
  color: #222;
  font-weight: 600;
  font-size: 30px;
  margin-right: 8px;
  white-space: nowrap;
}
.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="date"] {
  flex: 1;
  font-size: 30px;
  height: 60px;
  border: none;
  background: transparent;
  color: #333;
  outline: none;
  padding: 0 4px;
  min-width: 0;
}
.form-row input:disabled {
  color: #bbb;
}
.form-row .unit {
  color: #888;
  font-size: 22px;
  margin-left: 4px;
}
.form-row.required label::before {
  content: '*';
  color: #e74c3c;
  margin-right: 2px;
}
:deep(.van-radio-group) {
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
}
:deep(.van-radio) {
  font-size: 30px;
  color: #444;
  --van-radio-size: 34px;
  --van-radio-label-font-size: 30px;
  --van-radio-label-color: #444;
  --van-radio-checked-icon-color: #a48cff;
}
:deep(.van-radio__icon) {
  font-size: 34px !important;
}
.switch-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.switch-label {
  font-size: 30px;
  color: #444;
  margin-left: 0;
}
.save-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  max-width: 600px;
  margin: 0 auto 24px auto;
  z-index: 100;
  padding: 0;
  font-size: 32px;
  height: 76px;
  background: #a48cff;
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(80,80,200,0.13);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 2px;
}
</style> 